<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<cpn2></cpn2>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script>
// 1.创建组件构造器对象
const cpn1 = Vue.extend({
    template:`
    <div>
        <h2>标题1</h2>
        <p>组件1</p>
    </div>`
})
// 组件2中使用组件1
const cpn2 = Vue.extend({
    template:`
    <div>
        <h2>标题2</h2>
        <p>组件2</p>
        <cpn1></cpn1>
    </div>`,
    components:{
    cpn1:cpn1
    }
})

const app = new Vue({
    el:"#app",
    components:{//局部组件创建
    cpn2:cpn2
    }
})
</script>
  </body>
  </html>